import { useState } from "react";
import BaseCard from "components/BaseCard";
import CommentAddReview from "components/Comment/CommentAddReview";
import { Avatar, Box, Button, Typography, Stack } from "@mui/material";
import moment from "moment";
import "moment/locale/zh-cn";
const CommentCard = ({ id, content, createdAt, user, reviews }) => {
  const [isShow, toggleIsShow] = useState(false);
  const clickHandle = () => {
    toggleIsShow(!isShow);
  };
  return (
    <BaseCard>
      <Stack
        direction="row"
        sx={{
          display: "flex",
          width: 1,
        }}
      >
        <Box
          sx={{
            width: "10%",
            position: "relative",
          }}
        >
          <Avatar
            src={user.image}
            sx={{
              width: 60,
              height: 60,
              position: "absolute",
              right: 5,
            }}
          ></Avatar>
        </Box>

        <Box
          sx={{
            width: "80%",
            px: 2,
          }}
        >
          <Typography variant="h5" component="h2" sx={{ py: 1 }}>
            {user.name || user.email}
          </Typography>
          <Typography sx={{ wordWrap: "break-word" }} component="h3">
            {content}
          </Typography>
        </Box>
        <Box
          sx={{
            width: "10%",
          }}
        >
          <Typography>{moment(createdAt).fromNow()}</Typography>
          {/* <Button onClick={clickHandle}>回复</Button> */}
        </Box>
      </Stack>
      {isShow && <CommentAddReview id={id} />}
      {reviews?.length > 0 &&
        reviews.map((x) => <Typography key={x.id}>{x.content}</Typography>)}
    </BaseCard>
  );
};

export default CommentCard;
